<script setup>
import {onMounted, ref} from "vue";
import {getArchiveList} from "@/api/archive.js";
import {getNewArticleList} from "@/api/article.js";
import VIcon from "@/components/icon/VIcon.vue";
import avatar2 from '@/assets/images/avatar.jpg';
import {useRouter} from "vue-router";
import {getArticleCommentStat} from "@/api/stat.js";

const $router = useRouter();


onMounted(() => {
  articleCommentCount();
  getNewArticle();
  getArchiveDateList();
});
const loading = ref({
  newArticle: false,
  postList: false
});
const archiveList = ref([]);
const countResult = ref({
  articleCount: 0,
  commentCount: 0
});

// 文章、评论数统计
const articleCommentCount = () => {
  getArticleCommentStat().then(res => {
    countResult.value = res.data;
  }).catch(err => {
    console.log(err);
  });
};
// 文章归档
const getArchiveDateList = async () => {
  await getArchiveList().then(res => {
    archiveList.value = res.data;
  }).catch(err => {
    console.log(err);
  });
};

const hotArticleList = ref([]);
// 最新文章
const getNewArticle = async () => {
  loading.value.newArticle = true;
  await getNewArticleList().then(res => {
    console.log(res);
    hotArticleList.value = res.data;
    loading.value.newArticle = false;
  }).catch((err) => {
    console.log(err);
    loading.value.newArticle = false;
  });
};
const readArticle = (data) => {
  console.log(data);
  if (!data?.id) return;
  $router.push({path: `/article/read/${data?.id}`});
};
</script>

<template>
  <div>
    <!-- 作者信息 -->
    <div class="v-author-box">
      <div class="v-author-info">
        <img :src="avatar2" alt="avatar" class="v-author-avatar">
      </div>
      <div class="v-blog-info">
        <div class="v-list-item">
          <span>文章数</span>
          <span>{{ countResult?.articleCount }}</span>
        </div>
        <div class="v-list-item">
          <span>评论数</span>
          <span>{{ countResult?.commentCount }}</span>
        </div>
      </div>
    </div>
    <!-- 热门文章 -->
    <div class="v-hot-post" v-if="hotArticleList?.length > 0">
      <span><v-icon icon="Reading"/>最新文章</span>
      <div class="v-hot-post-list" @click="readArticle(item)" v-for="item in hotArticleList" :key="item"
           v-loading="loading.newArticle">
        <span>{{ item.title }}</span>
      </div>
    </div>
    <!-- 文章归档 -->
    <div class="v-article-archive" v-if="archiveList?.length > 0">
      <span><v-icon icon="Calendar"/>文章归档</span>
      <div class="v-archive-item">
        <div v-for="item in archiveList" :key="item">
          <span>{{ item.count }}</span>
          <span>{{ item.timeStr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.v-author-box {
  //position: sticky;
  //top: 0;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  
  .v-author-info {
    height: 120px;
    background-image: url('@/assets/images/bg.jpg');
    position: relative;
    
    .v-author-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 1px solid #F3F5F7;
      position: absolute;
      left: calc(50% - 40px);
      bottom: -40px;
    }
  }
  
  .v-blog-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    
    .v-list-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.v-hot-post {
  margin-top: 10px;
  padding: 4px 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 4px;
  
  > span {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 0;
    border-bottom: 2px dotted #909399;
  }
  
  .v-hot-post-list {
    //background-color: #999999;
    margin: 4px 0;
    padding: 4px 0;
    box-sizing: border-box;
    color: #999999;
    font-size: 14px;
    transition: all .5s;
    border-bottom: 1px solid #F2F6FC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .v-hot-post-list:hover {
    cursor: pointer;
    border-radius: 4px;
    background-color: #F2F6FC;
  }
}

.v-article-archive {
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  
  > span {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 0;
    border-bottom: 2px dotted #909399;
  }
  
  .v-archive-item {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    //justify-content: space-between;
    
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 4px;
      //margin-bottom: 10px;
      margin: 0 5px 10px 5px;
      //box-shadow: 0 3px 8px 3px rgba(7, 17, 27, 0.09);
      border: 1px solid #F3F5F7;
      background-color: #F3F5F7;
      
      > span:nth-child(1) {
        font-size: 18px;
        font-weight: bold;
      }
      
      > span:nth-child(2) {
        font-size: 12px;
        color: #909399;
      }
    }
  }
  
  .v-archive-item > div:hover {
    cursor: pointer;
    background-color: rgba(7, 17, 27, 0.09);
  }
}
</style>